<template>
	<container-wrapper :designer="designer" :widget="thisWidget" :parent-widget="thisParentWidget" :parent-list="thisParentList"
					   :index-of-parent-list="thisIndexOfParentList">
		<el-card :key="thisWidget.id" class="card-container" @click.stop="selectWidget(thisWidget)"
				 :shadow="thisWidget.options.shadow" :style="{width: thisWidget.options.cardWidth + '!important' || ''}"
				 :class="[selected ? 'selected' : '', !!thisWidget.options.folded ? 'folded' : '', customClass]">
			<template #header>
				<div class="clear-fix">
					<span>{{ thisWidget.options.label }}</span>
					<i v-if="thisWidget.options.showFold" class="float-right" @click="toggleCard">
						<template v-if="!thisWidget.options.folded">
							<el-icon>
								<ArrowDown/>
							</el-icon>
						</template>
						<template v-else>
							<el-icon>
								<ArrowUp/>
							</el-icon>
						</template>
					</i>
				</div>
			</template>
			<draggable :list="thisWidget.widgetList" item-key="id" v-bind="{group:'dragGroup', ghostClass: 'ghost',animation: 200}"
					   handle=".drag-handler" :component-data="{name: 'fade'}"
					   style="min-height:20px;width: 100%"
					   @add="(evt) => onContainerDragAdd(evt, thisWidget.widgetList)"
					   @update="onContainerDragUpdate" :move="checkContainerMove">
				<template #item="{ element: subWidget, index: swIdx }">
					<div class="form-widget-list">
						<template v-if="'container' === subWidget.category">
							<component :is="subWidget.type + '-widget'" :widget="subWidget" :designer="designer" :key="subWidget.id" :parent-list="thisWidget.widgetList"
									   :index-of-parent-list="swIdx" :parent-widget="thisWidget"></component>
						</template>
						<template v-else>
							<component :is="subWidget.type + '-widget'" :field="subWidget" :designer="designer" :key="subWidget.id" :parent-list="thisWidget.widgetList"
									   :index-of-parent-list="swIdx" :parent-widget="thisWidget" :design-state="true"></component>
						</template>
					</div>
				</template>
			</draggable>
		</el-card>
	</container-wrapper>
</template>

<script>
import containerMixin from "@/components/designer/form-designer/form-widget/container-widget/containerMixin"
import ContainerWrapper from "@/components/designer/form-designer/form-widget/container-widget/container-wrapper"
import refMixinDesign from "@/components/designer/form-designer/refMixinDesign"
import {ArrowDown, ArrowUp} from '@element-plus/icons-vue'
import FieldComponents from '@/components/designer/form-designer/form-widget/field-widget/index'
import OtherWidget from "@/components/designer/form-designer/form-widget/container-widget/index"
export default {
	name: "card-widget",
	componentName: 'ContainerWidget',
	mixins: [containerMixin, refMixinDesign],
	inject: ['refList'],
	components: {
		...OtherWidget,
		ContainerWrapper,
		ArrowDown,
		ArrowUp,
		...FieldComponents
	},
	props: {
		widget: Object,
		parentWidget: Object,
		parentList: Array,
		indexOfParentList: Number,
		designer: Object,
	},
	computed: {
		selected() {
			return this.thisWidget.id === this.designer.selectedId
		},

		customClass() {
			return this.thisWidget.options.customClass || ''
		},

	},
	data(){
		return{
			thisWidget:this.widget,
			thisParentWidget:this.parentWidget,
			thisParentList:this.parentList,
			thisIndexOfParentList:this.indexOfParentList
		}
	},
	watch: {
		'widget': {
			handler(val) {
				if (val) {
					this.thisWidget = val
				}
			}
		},
		'parentWidget': {
			handler(val) {
				if (val) {
					this.thisParentWidget = val
				}
			}
		},
		'parentList': {
			handler(val) {
				if (val) {
					this.thisParentList = val
				}
			}
		},
		'indexOfParentList': {
			handler(val) {
				if (val) {
					this.thisIndexOfParentList = val
				}
			}
		},
	},
	created() {
		this.initRefList()
	},
	methods: {
		/**
		 * 检查接收哪些组件拖放，如不接受某些组件拖放，则根据组件类型判断后返回false
		 * @param evt
		 * @returns {boolean}
		 */
		checkContainerMove(evt) {
			return true
		},

		toggleCard() {
			this.thisWidget.options.folded = !this.thisWidget.options.folded
		},

		/**
		 * 设置折叠/打开状态
		 * @param folded
		 */
		setFolded(folded) {
			this.thisWidget.options.folded = !!folded
		}

	}
}
</script>

<style lang="scss" scoped>
@import "../../../assets/formdesigner/styles/global.scss";

.card-container.selected {
	outline: 2px solid $--color-primary !important;
}

.card-container {
	margin: 3px;

	.form-widget-list {
		width: 100%;
		min-height: 28px;
	}
}

:deep(.el-card__header) {
	padding: 10px 12px;
}

.folded :deep(.el-card__body) {
	display: none;
}

.clear-fix:before, .clear-fix:after {
	display: table;
	content: "";
}

.clear-fix:after {
	clear: both;
}

.float-right {
	float: right;
}

</style>
